<template>
  <div class="page-scan-mana">
    <el-form :inline="true" :model="dataQueryForm" ref="dataQueryForm">
      <div class="pc-page-header">
        <el-form-item prop="id">
          <el-input v-model="dataQueryForm.demandNo" clearable class="pc-input3-col5" placeholder="输入求购编号"></el-input>
        </el-form-item>
        <el-form-item  prop="isDeleted">
          <el-select v-model="dataQueryForm.status" clearable placeholder="选择求购状态" class="pc-input3-col5" >
            <el-option v-for="item in statusOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="id">
          <el-input v-model="dataQueryForm.userNo" clearable class="pc-input3-col5" placeholder="输入求购人编号"></el-input>
        </el-form-item>
        <el-form-item prop="id">
          <el-input v-model="dataQueryForm.companyName" clearable class="pc-input3-col5" placeholder="公司名称"></el-input>
        </el-form-item>
        <el-form-item prop="id" v-show="isshowMore">
          <el-input v-model="dataQueryForm.goodsName" clearable class="pc-input3-col5" placeholder="产品名称"></el-input>
        </el-form-item>
        <el-form-item v-show="isshowMore">
          <el-date-picker class="block"
                          v-model="dataQueryForm.statisticDate"
                          type="daterange"
                          range-separator="-"
                          start-placeholder="创建开始日期"
                          end-placeholder="创建结束日期"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          @change="getDate">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="queryDataFn">搜索</el-button>
          <el-button type="primary" @click="refresh('dataQueryForm')">刷新</el-button>
          <el-button type="primary" @click="batchShielding(true)">批量屏蔽</el-button>
          <el-button type="primary" @click="batchShielding(false)">解除屏蔽</el-button>
          <el-button type="primary" @click="exportData('dataQueryForm')">导出</el-button>
          <el-button type="primary" @click="showMore()">{{showMoreText}}</el-button>
        </el-form-item>
      </div>
    </el-form>
    <egrid border class="page-list"
           column-type="selection"
           :data="tableData"
           :columns="columns"
           :columns-schema="columnsSchema"
           :columns-props="columnsProps"
           @selection-change="selectionChange">
    </egrid>

    <div class="pc-pagination-panel">
      <pc-pagination ref="pcPagination" :url="pageUrl.queryDataList" :queryData="dataQueryForm"
                     @on-query="queryCallBackFn">
      </pc-pagination>
    </div>

    <!--求购详情页面-->
    <pc-dialog :is-show="isShowDetailDialog" title='求购详情' @on-close="isShowDetailDialog = false">
      <div>
        <detail :id="detailId">
        </detail>
      </div>
    </pc-dialog>
    <!--交易凭证页面-->
    <pc-dialog :is-show="isShowCredentialDialog" :title='dialogTitle' @on-close="isShowCredentialDialog = false">
      <div>
        <credential :id="detailId" :isCloseOper="isCloseOper" @sure="afterUpdateCredential()">
        </credential>
      </div>
    </pc-dialog>

  </div>
</template>

<script type="text/ecmascript-6">
  import PcPagination from 'components/form/pagination';
  import PcButton from 'components/form/button';
  import PcDialog from 'components/dialog';
  import EgridCellView from 'components/wms/comm/EgridCellView.vue';
  import {enums} from '../../../../utils/settings';
  import Detail from './detail.vue';
  import Credential from './credential.vue';
  let that;

  // 求购编号链接详情
  var demandNoLink = {
    template: ` <el-button class="demand-no" @click="viewdetail(row)" type="text" size="small">{{this.row.demandNo}}</el-button>`,
    props: ['row'],
    methods: {
      viewdetail(val) {
        that.detailId = val.id;
        this.$emit('demand-detail', val);
      }
    }
  };

  // 操作按钮
  var Btn = {
    template: `<div style="display:flex; width: 100%;flex-wrap: wrap">
        <el-button v-if="showCloseDemand"  type="info" plain @click="closeDemand(row)">关闭求购</el-button>
        <el-button v-if="showUpdateCredential"  type="primary" plain @click="updateCredential(row)">更新凭证</el-button>
        <el-button v-if="showBatchShielding"  type="info" plain @click="shielding(row)" class="shield ">屏蔽</el-button>
        <el-button v-if="showUnBatchShielding"  type="danger" plain @click="unShielding(row)">解除屏蔽</el-button>
      </div>`,
    props: ['row'],
    computed: {
      // 是否显示关闭求购按钮
      showCloseDemand() {
        return this.row.status === enums.IBS_DEMAND_STATUS.IN_DEMAND;
      },
      // 是否显示更新凭证按钮
      showUpdateCredential() {
        return this.row.status === enums.IBS_DEMAND_STATUS.CLOSED;
      },
      // 是否显示屏蔽按钮
      showBatchShielding() {
        return this.row.status === enums.IBS_DEMAND_STATUS.IN_DEMAND;
      },
      // 是否显示解除屏蔽按钮
      showUnBatchShielding() {
        return this.row.status === enums.IBS_DEMAND_STATUS.IN_SHIELDING;
      }
    },
    methods: {
      // 关闭求购
      closeDemand (val) {
        this.$emit('update-credential', val, '关闭求购', true);
      },
      // 更新凭证
      updateCredential (val) {
        this.$emit('update-credential', val, '更新凭证', false);
      },
      // 屏蔽
      shielding (val) {
        this.$emit('single-shielding', val, true);
      },
      // 解除屏蔽
      unShielding (val) {
        this.$emit('single-shielding', val, false);
      }
    }
  };

  export default {
    data() {
      return {
        isshowMore: false,
        showMoreText: '更多',
        detailId: '',
        isCloseOper: false,
        dialogTitle: '',
        isShowDetailDialog: false,
        isShowCredentialDialog: false,
        dataQueryForm: {
          userNo: null,
          companyName: null,
          goodsName: null,
          statisticDate: null
        },
        tableData: [],
        columns: [
          {
            label: '编号',
            // prop: 'demandNo'
            component: demandNoLink,
            listeners: {
              'demand-detail' (val) {
                that.viewDetailFn(val);
              }
            }
          },
          {
            label: '状态',
            prop: 'statusDesc'
          },
          {
            label: '求购人',
            prop: 'contactName'
          },
          {
            label: '求购人编号',
            prop: 'userNo'
          },
          {
            label: '公司名称',
            prop: 'companyName'
          },
          {
            label: '产品名称',
            prop: 'goodsName'
          },
          {
            label: '产地',
            prop: 'countryOrigin'
          },
          {
            label: '意向价格(RMB/KG)',
            prop: 'intentPriceString'
          },
          {
            label: '厂号',
            prop: 'vendorNo'
          },
          {
            label: '求购地',
            prop: 'city'
          },
          {
            label: '求购量(吨)',
            prop: 'weight'
          },
          {
            label: '查看人数',
            prop: 'seeCount'
          },
          {
            label: '报价人数',
            prop: 'quoteCount'
          },
          {
            label: '创建时间',
            prop: 'createdTime'
          },
          {
            label: '操作',
            minWidth: 192,
            fixed: 'right',
            component: Btn, // 'el-button'
            listeners: {
              'single-shielding' (data, status) {
                that.singleShielding(data, status);
              },
              'update-credential' (data, title, flag) {
                that.viewCredentialFn(data, title, flag);
              }
            },
            propsHandler: function ({ row, col, column }) {
              return {row, col, column};
            }
          }
        ],
        columnsSchema: {
          '公司': {minWidth: 200},
          '创建时间': {minWidth: 160}
        },
        selecetedRows: [],
        // columnsProps 用于定义所有 columns 公共的属性，
        // 这里属性可以参考这里： http://element.eleme.io/#/zh-CN/component/table#table-column-attributes
        columnsProps: {
          height: 40,
          minWidth: 140,
          showOverflowTooltip: true,
          component: EgridCellView
        },
        statusOption: [
          {
            value: '1',
            label: '求购中'
          }, {
            value: '2',
            label: '已屏蔽'
          }, {
            value: '3',
            label: '已关闭'
          }
        ],
        // columnsHandler 可用于在现有的 columns 进行操作，对 columns 进行增删改，这里新增了操作列
        pageUrl: {
          queryDataList: '/ibs/web/demand/queryListWithPage'
        }
      };
    },
    components: {
      PcPagination, PcButton, PcDialog, Detail, Credential
    },
    created() {
      that = this;
    },

    methods: {
      getDate() {
        if (this.dataQueryForm.statisticDate === null) {
          this.dataQueryForm.startDate = '';
          this.dataQueryForm.startDate = '';
        } else {
          this.dataQueryForm.startDate = this.dataQueryForm.statisticDate[0];
          this.dataQueryForm.endDate = this.dataQueryForm.statisticDate[1];
        }
      },
      // 表头样式
      getHeaderStyle({row, column, rowIndex, columnIndex}) {
        if (rowIndex === 0) {
          return 'background: #f5f5f5; height: 50px';
        } else {
          return '';
        }
      },
      getRowClass({row, column, rowIndex, columnIndex}) {
        if (rowIndex === 0) {
          return 'background:rgb(245, 245, 245);';
        } else {
          return '';
        }
      },
      viewDetailFn (scopeRow) {
        this.isShowDetailDialog = true;
      },
      viewCredentialFn (scopeRow, title, isCloseOper) {
        this.detailId = scopeRow.id;
        this.dialogTitle = title;
        this.isCloseOper = isCloseOper;
        this.isShowCredentialDialog = true;
      },
      openMessage() {
        this.$notify.info({
          title: '自定义位置',
          message: '右下角弹出的消息',
          position: 'bottom-right'
        });
      },
      showMore () {
        this.isshowMore = !this.isshowMore;
        if (this.isshowMore) {
          this.showMoreText = '收起';
        } else {
          this.showMoreText = '更多';
        }
      },
      afterUpdateCredential() {
        this.isShowCredentialDialog = false;
        this.$refs.pcPagination.queryListWithPageFn(false);
      },
      queryCallBackFn(res) {
        this.tableData = res.result.list;
      },
      queryDataFn() {
        this.$refs.pcPagination.queryListWithPageFn(true);
      },
      refresh(formName) {
        this.$refs[formName].resetFields();
        this.dataQueryForm.demandNo = null;
        this.dataQueryForm.status = null;
        this.dataQueryForm.userNo = null;
        this.dataQueryForm.companyName = null;
        this.dataQueryForm.goodsName = null;
        this.dataQueryForm.statisticDate = null;
        this.dataQueryForm.startDate = null;
        this.dataQueryForm.endDate = null;
        this.queryDataFn();
      },
      singleShielding (val, status) {
        // 调用后端接口
        var oper = status ? '屏蔽' : '解除屏蔽';
        this.ajaxBox({
          title: '操作确认',
          message: '确定要执行' + oper + '操作吗？',
          type: 'POST',
          url: '/ibs/web/demand/shielding',
          data: {actionDtoList: [{demandId: val.id, version: val.version}], shielding: status},
          loading: true,
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            if (res.code === 200) {
              this.$refs.pcPagination.queryListWithPageFn(false);
            } else {
              this.errorTip(res.message);
            }
          }
        });
      },
      batchShielding (status) {
        // 检查被选择对象的个数
        if (this.selecetedRows.length === 0) {
          this.errorTip('请先选择操作对象！');
          return;
        }

        // 将被选择的对象加入到后端接口参数中
        var actionDtoList = [];
        this.selecetedRows.forEach(function(item) {
          actionDtoList.push({demandId: item.id, version: item.version});
        });

        // 调用后端接口
        var oper = status ? '批量屏蔽' : '批量解除屏蔽';
        this.ajaxBox({
          title: '操作确认',
          message: '确定要执行' + oper + '操作吗？',
          type: 'POST',
          url: '/ibs/web/demand/shielding',
          data: {actionDtoList: actionDtoList, shielding: status},
          loading: true,
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            if (res.code === 200) {
              this.$refs.pcPagination.queryListWithPageFn(false);
            } else {
              this.errorTip(res.message);
            }
          }
        });
      },
      selectionChange (rows) {
        this.selecetedRows = rows;
      },
      // 导出数据
      exportData() {
        this.exportFile({
          type: 'POST',
          url: '/ibs/web/demand/exportDemand',
          data: this.dataQueryForm,
          loading: true,
          fileNameStart: '求购列表导出'
        });
      }
    }
  };
</script>
<style>
  .page-scan-mana .el-upload-list--picture-card .el-upload-list__item-thumbnail {
    width: 146px;
    height: 146px;
    display: block;
    position: relative;
  }

  .page-scan-mana .el-upload-list--picture-card .el-upload-list__item-thumbnail:before {
    content: "\E614";
    position: absolute;
    top: 18px;
    left: 40px;
    color: #b3b3b3;
    font-size: 60px;
    font-family: "maliiconfont" !important;
  }

  .page-scan-mana .topClassEditInfo .el-upload-list--picture-card .el-upload-list__item .el-icon-close {
    display: none;
  }

  .page-scan-mana .topClassEditInfo .el-upload-list--picture-card .el-upload-list__item .el-icon-close-tip {
    display: none;
  }

  .page-list .demand-no {
    padding: 5px 0px !important;
  }
  .el-button--info.is-plain.shield{
    color: #ff2b2b !important;
    border-color: #ffd6d6 !important;
    background-color: #ffe9e9 !important;
  }
</style>
